<template>
  <div>
    <s-title text="指挥体系"></s-title>
    <div class="command-system">
      <div class="content-top">
        <div class="content-top-box" v-for="(item, index) in top" :key="index">
          <span class="content-top-icon"></span>
          <span class="content-top-text">{{ item.name }}</span>
          <span class="content-top-value">{{ item.value }}</span>
        </div>
      </div>
      <div class="dialogBox-strentInfo" v-show="strentInfoshow">
        <el-dialog
          :title="strentInfoText"
          :visible.sync="strentInfoVisible"
          :modal="false"
          top="150px"
          width="10%"
        >
          <el-table :data="tableData1" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="job" label="职务"> </el-table-column>
          </el-table>
        </el-dialog>
      </div>
      <div class="minddle-content">
        <div
          class="minddle-content-box"
          v-for="(item, index) in middle"
          :key="index"
        >
          <div class="minddle-icon-content">
            <div class="minddle-icon"></div>
            <span class="minddle-text-value">{{ item.value }}</span>
          </div>
          <span class="minddle-text">{{ item.name }}</span>
        </div>
      </div>
      <div class="contents">
        <div
          class="contents-box"
          v-for="(item, index) in lists"
          :key="index"
          @click="index < 7 ? cityunBtn(item.name) : ''"
        >
          <el-tooltip
            :disabled="index < 7 ? false : true"
            content="点击查看详情"
            placement="top-start"
            effect="dark"
          >
            <div>
              <div class="contents-icon"></div>
              <div class="contents-text">
                <span class="contents-text-name">{{ item.name }}</span>
                <span class="contents-text-value">{{ item.value }}</span>
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="dialogBox-cityunInfo" v-show="cityunInfoshow">
        <el-dialog
          :title="cityunInfoText"
          :visible.sync="cityunInfoVisible"
          :modal="false"
          top="130px"
          width="32.4%"
        >
          <div class="cityunInfoCon" v-infinite-scroll="cityunInfoload">
            <div
              class="dialogBox-cityunInfo-box"
              v-for="(item, index) in tableData2"
              :key="index"
            >
              <div class="cityunInfo-title">工作证</div>
              <div class="cityunInfo-content">
                <div class="cityunInfo-content-left">
                  <div class="cityunInfo-content-left-img">
                    <img :src="item.url" />
                  </div>
                </div>
                <div class="cityunInfo-content-right">
                  <div
                    class="cityunInfo-content-item"
                    v-for="(item2, index2) in item.info"
                    :key="index2"
                  >
                    <span class="cityunInfo-content-item-name">{{
                      item2.name
                    }}</span>
                    <span class="cityunInfo-content-item-value">{{
                      item2.value
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import { getConductCountList, getConductInfoList } from "../../../utils/api";
export default {
  name: "commandSystem",
  components: {
    sTitle,
  },
  data() {
    return {
      top: [
        { name: "指挥长", value: "5" },
        { name: "值班员", value: "3" },
      ],
      strentInfoVisible: true,
      strentInfoshow: false,
      strentInfoText: "",
      tableData1: [
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
        { name: "张三", job: "上海半淞园街道" },
      ],
      middle: [
        { name: "街道", value: "" },
        { name: "城运工作站", value: "3" },
        { name: "居委", value: "18" },
      ],
      lists: [
        { name: "公安", value: "44" },
        { name: "市场", value: "25" },
        { name: "城管", value: "35" },
        { name: "房办", value: "5" },
        { name: "绿化", value: "7" },
        { name: "综治", value: "7" },
        { name: "城运", value: "8" },
        { name: "居委", value: "138" },
        { name: "物业", value: "18" },
        { name: "第三方", value: "6" },
        { name: "其他", value: "37" },
      ],
      cityunInfoVisible: true,
      cityunInfoshow: false,
      cityunInfoText: "",
      tableData2: [],
      localpage: 1,
      selItme: "",
      totalPage: 0,
    };
  },
  created() {},
  mounted() {
    getConductCountList(JSON.stringify({ streetname: "豫园" })).then((res) => {
      if (res.data.code === 200) {
        let list = res.data.data;
        for (let i = 0; i < this.lists.length; i++) {
          for (let j = 0; j < list.length; j++) {
            if (this.lists[i].name === list[j].identity) {
              this.lists[i].value = list[j].num;
            }
          }
        }
      }
    });
  },
  methods: {
    strentBtn(item) {
      this.strentInfoVisible = true;
      this.strentInfoshow = true;
      this.strentInfoText = item;
    },
    cityunBtn(item) {
      this.cityunInfoVisible = true;
      this.cityunInfoshow = true;
      this.cityunInfoText = item + "部门人员力量";
      if (item !== this.selItme) {
        this.tableData2 = [];
        this.totalPage = 0;
        this.localpage = 1;
      }
      this.selItme = item;

      if (this.totalPage) return;
      this.getInfoDetail();
    },
    cityunInfoload() {
      if (this.localpage === this.totalPage) return;
      this.localpage++;
      this.getInfoDetail();
    },
    getInfoDetail() {
      let parmas = {
        streetname: "豫园",
        identity: this.selItme,
        pageSize: 10,
        currPage: this.localpage,
      };
      getConductInfoList(JSON.stringify(parmas)).then((res) => {
        if (res.data.code === 200 && res.data.data.list.length > 0) {
          let me = this;
          this.totalPage = !this.totalPage
            ? res.data.data.totalPage
            : this.totalPage;
          res.data.data.list.forEach(function (val) {
            let info = [];
            info.push({ name: "姓名", value: val.name || "--" });
            info.push({ name: "身份类别", value: val.identity || "--" });
            info.push({ name: "职务", value: val.employment || "--" });
            info.push({ name: "工作权限", value: val.workright || "--" });
            info.push({ name: "部门", value: val.department || "--" });
            info.push({ name: "排班属性", value: val.shift || "--" });
            info.push({ name: "对应居民区", value: val.conmunity || "--" });
            info.push({
              name: "联系方式",
              value:
                val.contacte !== ""
                  ? val.contacte.slice(0, 3) + "********" || "--"
                  : val.wechatphone.slice(0, 3) + "********" || "--",
            });
            info.push({
              name: "政务微信",
              value: val.wechatstate == "是" ? "已开通" : "未开通",
            });
            let url = !val.photo
              ? "./images/plate1/nullpic.png"
              : "data:image/jpg;base64," + val.photo;
            me.tableData2.push({
              url: url,
              info: info,
            });
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.command-system {
  width: 632px;
  height: 322px;
  background: url(~@/assets/image/left1/commandSystem_bg.png);
  background-size: 100% 100%;
}
.content-top {
  width: 50%;
  height: 18px;
  position: absolute;
}
.content-top-box {
  width: 160px;
  height: 100%;
  display: flex;
  cursor: pointer;
  z-index: 9;
}
.content-top-box:nth-child(1) {
  position: absolute;
  top: 4px;
  left: 130px;
}
.content-top-box:nth-child(2) {
  position: absolute;
  top: 4px;
  left: 369px;
}
.content-top-box:nth-child(1) .content-top-icon {
  background-image: url("../../../assets/image/left1/commanderchief.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content-top-box:nth-child(2) .content-top-icon {
  background-image: url("../../../assets/image/left1/duty.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content-top-icon {
  width: 17px;
  height: 18px;
}
.content-top-text {
  width: 55px;
  height: 18px;
  margin: 0 5px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 18px;
}
.content-top-value {
  width: 30px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
  line-height: 18px;
}
/* middle */
.minddle-content {
  width: 50%;
  height: 55px;
  position: absolute;
}
.minddle-content-box {
  width: 100px;
  height: 100%;
}
.minddle-content-box:nth-child(1) {
  position: absolute;
  width: 80px;
  left: 260px;
  top: -8px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../../assets/image/left1/commandSystem-icon1.png");
}
.minddle-content-box:nth-child(2) {
  position: absolute;
  left: 250px;
  top: 56px;
}
.minddle-content-box:nth-child(3) {
  position: absolute;
  left: 250px;
  top: 180px;
}
.minddle-icon-content {
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: center;
}
.minddle-icon {
  width: 35px;
  height: 28px;

  -webkit-text-stroke: 1px #1f1f1f;
  text-stroke: 1px #1f1f1f;
}
.minddle-text-value {
  text-align: center;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
  line-height: 28px;
  font-weight: bold;
}

.minddle-content-box:nth-child(1) .minddle-icon {
  background-image: url("../../../assets/image/left1/command-detail-area.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.minddle-content-box:nth-child(2) .minddle-icon {
  background-image: url("../../../assets/image/left1/street.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.minddle-content-box:nth-child(3) .minddle-icon {
  background-image: url("../../../assets/image/left1/residence.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* .minddle-icon img{
    width: 100%;
    height: 100%;
} */
.minddle-text {
  display: inline-block;
  width: 100%;
  height: 27px;
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #ffffff;
  line-height: 27px;
  text-align: center;
}
.contents {
  width: 50%;
  height: 55px;
  position: absolute;
}
.contents-box {
  width: 84px;
  height: 66px;
  background-image: url("../../../assets/image/left1/urban-power-detail2-item.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 9;
}
.contents-box:nth-child(1) {
  position: absolute;
  top: 84px;
  left: 15px;
  cursor: pointer;
}
.contents-box:nth-child(2) {
  position: absolute;
  top: 111px;
  left: 91px;
  cursor: pointer;
}
.contents-box:nth-child(3) {
  position: absolute;
  top: 118px;
  left: 175px;
  cursor: pointer;
}
.contents-box:nth-child(4) {
  position: absolute;
  top: 120px;
  left: 259px;
  cursor: pointer;
}
.contents-box:nth-child(5) {
  position: absolute;
  top: 114px;
  left: 338px;
  cursor: pointer;
}
.contents-box:nth-child(6) {
  position: absolute;
  top: 105px;
  left: 426px;
  cursor: pointer;
}
.contents-box:nth-child(7) {
  position: absolute;
  top: 89px;
  left: 503px;
  cursor: pointer;
}
.contents-box:nth-child(8) {
  position: absolute;
  top: 220px;
  left: 54px;
}
.contents-box:nth-child(9) {
  position: absolute;
  top: 235px;
  left: 173px;
}
.contents-box:nth-child(10) {
  position: absolute;
  top: 234px;
  left: 340px;
}
.contents-box:nth-child(11) {
  position: absolute;
  top: 226px;
  left: 466px;
}

.contents-icon {
  width: 30px;
  height: 30px;
  margin: auto;
}
.contents-box:nth-child(1) .contents-icon {
  background-image: url("../../../assets/image/left1/police.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(2) .contents-icon {
  background-image: url("../../../assets/image/left1/market.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(3) .contents-icon {
  background-image: url("../../../assets/image/left1/Urban.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(4) .contents-icon {
  background-image: url("../../../assets/image/left1/housingoffice.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(5) .contents-icon {
  background-image: url("../../../assets/image/left1/green.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(6) .contents-icon {
  background-image: url("../../../assets/image/left1/comprehensive.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(7) .contents-icon {
  background-image: url("../../../assets/image/left1/transport.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(8) .contents-icon {
  background-image: url("../../../assets/image/left1/committee.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(9) .contents-icon {
  background-image: url("../../../assets/image/left1/property.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(10) .contents-icon {
  background-image: url("../../../assets/image/left1/thirdparty.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-box:nth-child(11) .contents-icon {
  background-image: url("../../../assets/image/left1/other.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.contents-text {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
}
.contents-text-name {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #cccccc;
  line-height: 20px;
}
.contents-text-value {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
  line-height: 20px;
  margin-left: 10px;
}
.dialogBox-cityunInfo-box {
  float: left;
  width: 379px;
  height: 239px;
  background: rgba(0, 42, 84, 0.75);
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 6px #00c0ff inset;
  box-shadow: 0px 0px 6px #00c0ff inset;
  margin-bottom: 10px;
  margin-left: 8px;
  margin-right: 8px;
}
.cityunInfo-title {
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffff00;
}
.cityunInfo-content {
  width: 379px;
  height: 200px;
}
.cityunInfo-content-left {
  float: left;
  width: 98px;
  height: 200px;
}
.cityunInfo-content-left-img {
  width: 78px;
  height: 98px;
  margin: 0 auto;
  border: #979998 solid 2px;
}
.cityunInfo-content-left-img img {
  width: 100%;
  height: 100%;
}
.cityunInfo-content-right {
  float: left;
  width: 280px;
  height: 200px;
}
.cityunInfo-content-item {
  width: 49%;
  height: 26px;
  line-height: 26px;
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 5px;
}
.cityunInfo-content-item-name {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #35c7f0;
  margin-left: 0px;
}
.cityunInfo-content-item-value {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  margin-left: 0px;
}
.cityunInfoCon {
  width: 100%;
  height: 710px;
  overflow-y: auto;
}
.cityunInfoCon::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.cityunInfoCon::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #00aeff;
}

.cityunInfoCon::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 10px;
}
</style>
